<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>审批中心 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 80px;
        }
        .tab-active {
            color: #2563eb;
            border-bottom: 2px solid #2563eb;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e5e5;
            z-index: 100;
        }
        .swipe-item {
            position: relative;
            overflow: hidden;
        }
        .swipe-actions {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            padding: 0 20px;
            background: linear-gradient(to left, #ef4444, #dc2626);
            transform: translateX(100%);
            transition: transform 0.3s;
        }
        .swipe-item.active .swipe-actions {
            transform: translateX(0);
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="home.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">审批中心</h1>
        <div class="ml-auto relative">
            <i class="fas fa-search text-xl"></i>
        </div>
    </div>

    <!-- Tabs -->
    <div class="bg-white border-b border-gray-200">
        <div class="flex">
            <button onclick="switchTab('pending')" id="tab-pending" class="flex-1 py-3 text-center font-semibold tab-active relative">
                待我审批
                <span class="ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5">6</span>
            </button>
            <button onclick="switchTab('my')" id="tab-my" class="flex-1 py-3 text-center font-semibold text-gray-500">
                我发起的
            </button>
            <button onclick="switchTab('history')" id="tab-history" class="flex-1 py-3 text-center font-semibold text-gray-500">
                已审批
            </button>
        </div>
    </div>

    <!-- Tab Content: 待我审批 -->
    <div id="content-pending" class="tab-content">
        <!-- Filter -->
        <div class="bg-white px-4 py-3 border-b border-gray-100 flex items-center gap-2 overflow-x-auto">
            <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm whitespace-nowrap">全部</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">采购申请</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">付款申请</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">材料申领</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">请假申请</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">用车申请</button>
        </div>

        <!-- Pending List -->
        <div class="mt-2 space-y-2 px-4">
            <!-- Item 1 -->
            <a href="approval-detail.html" class="swipe-item block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded mr-2">紧急</span>
                            <span class="text-sm font-semibold text-gray-800">采购申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">消防栓采购申请</div>
                        <div class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：王工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程A项目
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="far fa-clock text-gray-400 mr-1"></i>2小时前
                            <span class="mx-2">|</span>
                            <i class="fas fa-yen-sign text-gray-400 mr-1"></i>金额：¥50,000
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="swipe-actions">
                    <button class="text-white px-4 py-2 rounded-lg mr-2 bg-green-500">
                        <i class="fas fa-check mr-1"></i>同意
                    </button>
                    <button class="text-white px-4 py-2 rounded-lg bg-red-500">
                        <i class="fas fa-times mr-1"></i>驳回
                    </button>
                </div>
            </a>

            <!-- Item 2 -->
            <a href="approval-detail.html" class="swipe-item block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded mr-2">普通</span>
                            <span class="text-sm font-semibold text-gray-800">付款申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">供应商付款申请</div>
                        <div class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：李工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程B项目
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="far fa-clock text-gray-400 mr-1"></i>5小时前
                            <span class="mx-2">|</span>
                            <i class="fas fa-yen-sign text-gray-400 mr-1"></i>金额：¥30,000
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="swipe-actions">
                    <button class="text-white px-4 py-2 rounded-lg mr-2 bg-green-500">
                        <i class="fas fa-check mr-1"></i>同意
                    </button>
                    <button class="text-white px-4 py-2 rounded-lg bg-red-500">
                        <i class="fas fa-times mr-1"></i>驳回
                    </button>
                </div>
            </a>

            <!-- Item 3 -->
            <a href="approval-detail.html" class="swipe-item block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">普通</span>
                            <span class="text-sm font-semibold text-gray-800">材料申领</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">消防管道申领</div>
                        <div class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：张工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程A项目
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="far fa-clock text-gray-400 mr-1"></i>1天前
                            <span class="mx-2">|</span>
                            <i class="fas fa-box text-gray-400 mr-1"></i>数量：100米
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="swipe-actions">
                    <button class="text-white px-4 py-2 rounded-lg mr-2 bg-green-500">
                        <i class="fas fa-check mr-1"></i>同意
                    </button>
                    <button class="text-white px-4 py-2 rounded-lg bg-red-500">
                        <i class="fas fa-times mr-1"></i>驳回
                    </button>
                </div>
            </a>

            <!-- Item 4 - Leave Application -->
            <a href="approval-detail.html" class="swipe-item block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-pink-100 text-pink-600 text-xs px-2 py-1 rounded mr-2">普通</span>
                            <span class="text-sm font-semibold text-gray-800">请假申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">事假申请</div>
                        <div class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：赵工
                            <span class="mx-2">|</span>
                            <i class="fas fa-calendar-times text-gray-400 mr-1"></i>1天
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="far fa-clock text-gray-400 mr-1"></i>1天前
                            <span class="mx-2">|</span>
                            <i class="fas fa-calendar text-gray-400 mr-1"></i>2024-01-16
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="swipe-actions">
                    <button class="text-white px-4 py-2 rounded-lg mr-2 bg-green-500">
                        <i class="fas fa-check mr-1"></i>同意
                    </button>
                    <button class="text-white px-4 py-2 rounded-lg bg-red-500">
                        <i class="fas fa-times mr-1"></i>驳回
                    </button>
                </div>
            </a>

            <!-- Item 5 -->
            <a href="approval-detail.html" class="swipe-item block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded mr-2">普通</span>
                            <span class="text-sm font-semibold text-gray-800">用车申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">项目现场用车</div>
                        <div class="text-xs text-gray-500 mb-2">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：赵工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程C项目
                        </div>
                        <div class="text-xs text-gray-400">
                            <i class="far fa-clock text-gray-400 mr-1"></i>2天前
                            <span class="mx-2">|</span>
                            <i class="fas fa-calendar text-gray-400 mr-1"></i>2024-01-18
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="swipe-actions">
                    <button class="text-white px-4 py-2 rounded-lg mr-2 bg-green-500">
                        <i class="fas fa-check mr-1"></i>同意
                    </button>
                    <button class="text-white px-4 py-2 rounded-lg bg-red-500">
                        <i class="fas fa-times mr-1"></i>驳回
                    </button>
                </div>
            </a>
        </div>
    </div>

    <!-- Tab Content: 我发起的 -->
    <div id="content-my" class="tab-content hidden">
        <!-- Filter -->
        <div class="bg-white px-4 py-3 border-b border-gray-100 flex items-center gap-2 overflow-x-auto">
            <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm whitespace-nowrap">全部</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">审批中</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">已通过</button>
            <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">已驳回</button>
        </div>

        <!-- My Applications List -->
        <div class="mt-2 space-y-2 px-4">
            <!-- Item 1 - 审批中 -->
            <a href="approval-detail.html" class="block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded mr-2">审批中</span>
                            <span class="text-sm font-semibold text-gray-800">采购申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">灭火器采购申请</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程A项目
                            <span class="mx-2">|</span>
                            <i class="fas fa-yen-sign text-gray-400 mr-1"></i>¥25,000
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <!-- Progress -->
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-xs text-gray-600">当前节点：财务审核中</span>
                        <span class="text-xs text-blue-600">查看进度 <i class="fas fa-arrow-right text-xs"></i></span>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded-full h-2">
                            <div class="bg-blue-500 h-2 rounded-full" style="width: 60%"></div>
                        </div>
                        <span class="ml-2 text-xs text-gray-500">60%</span>
                    </div>
                    <div class="flex items-center justify-between mt-2 text-xs text-gray-500">
                        <span>处理人：财务部-刘会计</span>
                        <span>1小时前</span>
                    </div>
                </div>
            </a>

            <!-- Item 2 - 已通过 (Leave) -->
            <a href="approval-detail.html" class="block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">已通过</span>
                            <span class="text-sm font-semibold text-gray-800">请假申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">病假申请</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-calendar-times text-gray-400 mr-1"></i>1天
                            <span class="mx-2">|</span>
                            <i class="fas fa-calendar text-gray-400 mr-1"></i>2024-01-13
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="bg-green-50 rounded-lg p-3">
                    <div class="flex items-center text-green-600 text-sm">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>审批通过，已同步至考勤记录</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">完成时间：2024-01-12 16:20</div>
                </div>
            </a>

            <!-- Item 3 - 已通过 -->
            <a href="approval-detail.html" class="block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">已通过</span>
                            <span class="text-sm font-semibold text-gray-800">材料申领</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">喷淋头申领</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程B项目
                            <span class="mx-2">|</span>
                            <i class="fas fa-box text-gray-400 mr-1"></i>50个
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="bg-green-50 rounded-lg p-3">
                    <div class="flex items-center text-green-600 text-sm">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>审批通过，已生成出库单</span>
                    </div>
                    <div class="text-xs text-gray-500 mt-1">完成时间：2024-01-15 14:30</div>
                </div>
            </a>

            <!-- Item 4 - 已驳回 -->
            <a href="approval-detail.html" class="block bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded mr-2">已驳回</span>
                            <span class="text-sm font-semibold text-gray-800">付款申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">供应商付款申请</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程C项目
                            <span class="mx-2">|</span>
                            <i class="fas fa-yen-sign text-gray-400 mr-1"></i>¥80,000
                        </div>
                    </div>
                    <div class="ml-3">
                        <i class="fas fa-chevron-right text-gray-300"></i>
                    </div>
                </div>
                <div class="bg-red-50 rounded-lg p-3">
                    <div class="flex items-center text-red-600 text-sm mb-1">
                        <i class="fas fa-times-circle mr-2"></i>
                        <span>审批驳回</span>
                    </div>
                    <div class="text-xs text-gray-600">驳回原因：金额超出预算范围，请重新申请</div>
                    <div class="text-xs text-gray-500 mt-1">驳回时间：2024-01-14 16:20</div>
                </div>
            </a>
        </div>
    </div>

    <!-- Tab Content: 已审批 -->
    <div id="content-history" class="tab-content hidden">
        <!-- Filter -->
        <div class="bg-white px-4 py-3 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-2 overflow-x-auto flex-1">
                <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-full text-sm whitespace-nowrap">全部</button>
                <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">采购</button>
                <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">付款</button>
                <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">申领</button>
                <button class="px-3 py-1 bg-gray-50 text-gray-600 rounded-full text-sm whitespace-nowrap">请假</button>
            </div>
            <button class="ml-2 text-gray-600">
                <i class="fas fa-filter"></i>
            </button>
        </div>

        <!-- History List -->
        <div class="mt-2 space-y-2 px-4">
            <!-- Item 1 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">已同意</span>
                            <span class="text-sm font-semibold text-gray-800">采购申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">消防管道采购</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：王工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程A项目
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 mt-3">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">审批时间</span>
                        <span class="text-gray-900 font-semibold">2024-01-15 10:30</span>
                    </div>
                    <div class="flex items-center justify-between text-sm mt-2">
                        <span class="text-gray-600">审批意见</span>
                        <span class="text-green-600">同意，按计划执行</span>
                    </div>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded mr-2">已驳回</span>
                            <span class="text-sm font-semibold text-gray-800">付款申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">供应商付款</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：李工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程B项目
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 mt-3">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">审批时间</span>
                        <span class="text-gray-900 font-semibold">2024-01-14 15:20</span>
                    </div>
                    <div class="flex items-center justify-between text-sm mt-2">
                        <span class="text-gray-600">审批意见</span>
                        <span class="text-red-600">驳回，请补充发票信息</span>
                    </div>
                </div>
            </div>

            <!-- Item 3 -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">已同意</span>
                            <span class="text-sm font-semibold text-gray-800">材料申领</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">报警器申领</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：张工
                            <span class="mx-2">|</span>
                            <i class="fas fa-building text-gray-400 mr-1"></i>消防工程A项目
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 mt-3">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">审批时间</span>
                        <span class="text-gray-900 font-semibold">2024-01-13 09:15</span>
                    </div>
                    <div class="flex items-center justify-between text-sm mt-2">
                        <span class="text-gray-600">审批意见</span>
                        <span class="text-green-600">同意</span>
                    </div>
                </div>
            </div>

            <!-- Item 4 - Leave Application -->
            <div class="bg-white rounded-xl shadow-sm p-4">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex-1">
                        <div class="flex items-center mb-2">
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded mr-2">已同意</span>
                            <span class="text-sm font-semibold text-gray-800">请假申请</span>
                        </div>
                        <div class="text-base font-bold text-gray-900 mb-1">事假申请</div>
                        <div class="text-xs text-gray-500">
                            <i class="fas fa-user text-gray-400 mr-1"></i>发起人：李工
                            <span class="mx-2">|</span>
                            <i class="fas fa-calendar-times text-gray-400 mr-1"></i>1天
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 mt-3">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">审批时间</span>
                        <span class="text-gray-900 font-semibold">2024-01-12 16:20</span>
                    </div>
                    <div class="flex items-center justify-between text-sm mt-2">
                        <span class="text-gray-600">审批意见</span>
                        <span class="text-green-600">同意，已同步考勤</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="flex justify-around py-2">
            <a href="home.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="approval.html" class="flex flex-col items-center py-2 px-4 text-blue-600">
                <i class="fas fa-clipboard-check text-xl mb-1"></i>
                <span class="text-xs">审批</span>
            </a>
            <a href="attendance-stats.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-chart-bar text-xl mb-1"></i>
                <span class="text-xs">统计</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>

    <script>
        function switchTab(tab) {
            // Hide all content
            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
            // Remove active from all tabs
            document.querySelectorAll('[id^="tab-"]').forEach(el => {
                el.classList.remove('tab-active', 'text-blue-600');
                el.classList.add('text-gray-500');
            });
            
            // Show selected content
            document.getElementById('content-' + tab).classList.remove('hidden');
            // Add active to selected tab
            const tabEl = document.getElementById('tab-' + tab);
            tabEl.classList.add('tab-active', 'text-blue-600');
            tabEl.classList.remove('text-gray-500');
        }

        // Swipe functionality (simplified)
        document.querySelectorAll('.swipe-item').forEach(item => {
            let startX = 0;
            let currentX = 0;
            let isDragging = false;

            item.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX;
                isDragging = true;
            });

            item.addEventListener('touchmove', (e) => {
                if (!isDragging) return;
                currentX = e.touches[0].clientX - startX;
                if (currentX < 0) {
                    item.style.transform = `translateX(${currentX}px)`;
                }
            });

            item.addEventListener('touchend', () => {
                isDragging = false;
                if (currentX < -50) {
                    item.classList.add('active');
                    item.style.transform = 'translateX(-120px)';
                } else {
                    item.classList.remove('active');
                    item.style.transform = 'translateX(0)';
                }
                currentX = 0;
            });
        });
    </script>
</body>
</html>

